<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/css/wp.css" media="all">

    <style>

        .input-block{
            margin-right: 50px;
        }

        .unit{
            position: absolute;
            right: 0px;
            top: 0px;
            right: -30px;
            line-height: 40px;
        }
    </style>
</head>
<body>
<div id="container" class="layuimini-container">
    <div class="layuimini-main">
        <h2 class="wp-module-title">天天盈</h2>
        <div class="wp-module-box">
            <form id="myform" class="layui-form" action="" lay-filter="example">
                <div class="layui-form-item">
                    <label class="layui-form-label">年化收益</label>
                    <div class="layui-input-block input-block">
                        <input type="text" v-model="earning" maxlength="5" oninput="this.value=this.value.replace(/[^\d.]/g,'');" lay-verify="check" autocomplete="off" class="layui-input">
                        <div class="unit">%</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">产品说明</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea" v-model="remark" lay-verify="emptyCheck"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin: auto;text-align: center;">
                        <button type="submit" style="width: 120px;" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="data-submit-btn">提交</button>
                        <button type="button" style="width: 120px;" class="layui-btn layui-btn-normal" lay-filter="data-reset-btn" @click="reset">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/module/index/config.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var $ = layui.jquery,
            form = layui.form;

        var vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                // 默认值
                initValue:{
                    earning:'',
                    remark:''
                },
                earning:'',
                remark:''
            },
            mounted:function(){
                this.init();
                this.submitEvent();
            },
            methods: {
                init:function(){
                    var that = this;
                    wp.httpGet({
                        url:wp.url('/wp/ewallet/wmps/finaProd/getTtyParams'),
                        data:{},
                        success:function(data){
                            if(data.dataBody){
                                that.earning = data.dataBody.yieldRate * 100;
                                that.remark = data.dataBody.finaProdDesc;

                                that.initValue.earning = that.earning;
                                that.initValue.remark = that.remark;
                            }
                        }
                    });
                },
                submitEvent:function(){
                    var that = this;

                    var reg = /^(\-)?\d+(\.\d+)?$/;
                    // 需要的时候自定义验证规则
                    form.verify({
                        check: function(value){
                            if(!value){
                                return '不能为空';
                            }

                            if(!reg.test(value)){
                                return '参数格式不正确';
                            }
                        },
                        emptyCheck:function(value){
                            if(!value){
                                return '不能为空';
                            }
                        }
                    });

                    // 监听提交操作
                    form.on('submit(data-submit-btn)', function (data) {
                        var loading = wp.loading();
                        wp.httpPost({
                            url:wp.url('/wp/ewallet/wmps/finaProd/modifyYieldRate'),
                            data:{
                                yieldRate:that.earning,
                                finaProdDesc:that.remark
                            },
                            success:function(data){
                                wp.closeLoading(loading);
                                layer.msg('修改成功');
                            }
                        });
                        return false;
                    });
                },
                reset:function(){
                    //$("#myform").get(0).reset();
                    this.earning = this.initValue.earning;
                    this.remark = this.initValue.remark;
                }
            }
        });
    });
</script>

</body>
</html>